<template>
	<scroll-view class="backview" bounces="false">
		<lexiconNavVue title="单词详情" />
		<view class="word-topview">
			<image class="core-img" v-if="word_detail.kernel" src="/static/image/course/core_word.png" alt="" srcset="">
			</image>
			<view class="word-detail-back" @click='audioPronounciation'>
				<view class="word-detail">
					{{word_detail.spell}}<span
						style="font-size: 12px; margin-left: 10px;">{{word_detail.partofSpeech}}</span>
				</view>
				<view class="word-detail-bottom">
					<image v-if='!showPronounciation' src='@/static/image/planbee/voice_bigger_off.png'
						class='voice-img'>
					</image>
					<image v-else src='../../static/image/fjh/voice_bigger1.png' class='voice-img'>
					</image>
					<div class="phonetic-mark">美
						[{{word_detail.internationalPhoneticAlphabet ? word_detail.internationalPhoneticAlphabet : word_detail.websterPhoneticAlphabet}}]
					</div>
				</view>
			</view>
			<view class="feedback" @click="handleFeedback">
				<image src="../../static/image/course/feedback.png" class="feedback-img" alt=""></image>
			</view>
		</view>
		<scroll-view scroll-y :style="{ height: scrollHeight + 'px'}">
			<view class="gameType-topTitle-view">
				<view class="gameType-topTitle">
					单词详情 | Word details
				</view>
				<view class="gameType-line"></view>
			</view>
			<view class="content-back">
				<view class="word-detailback">
					<view class="word-class" @click='audioPronounciation'>{{word_detail.spell}}<span
							style="font-size: 12px; margin-left: 10px;">{{word_detail.partofSpeech}}</span></view>
					<view class="word-bottom">
						<view class="phonetic-symbols" @click='audioPronounciation'>
							{{word_detail.internationalPhoneticAlphabet ? word_detail.internationalPhoneticAlphabet : word_detail.websterPhoneticAlphabet}}
						</view>
						<view class="word-icon">
							<view class="voice-imageback" @click='audioPronounciation'>
								<image v-if='!showPronounciation' src='@/static/image/planbee/voice_bigger_off.png'
									class='word-iconimg-big'>
								</image>
								<image v-else src='../../static/image/fjh/voice_word_bigger.png'
									class='word-iconimg-big'>
								</image>
							</view>
						</view>
					</view>
					<view class="word-bottom-message">注：此处音标仅供选手备赛参考使用
					</view>
					<view class="word-bottom-message2">实际Spelling
						Bee比赛中以现场发音为准。</view>

					<view class="word-example-title" v-if="word_detail.chinesemeaning">
						<text class="word-example-num">英译汉</text>
					<!-- 	<view class="voice-imageback">
							<image v-if="!showDefinition" src='@/static/image/planbee/voice_bigger_off.png'
								class='word-iconimg'></image>
							<image v-else src='@/static/image/planbee/voice_bigger.png' class='word-iconimg'>
							</image>
						</view> -->
					</view>
					<view v-if="word_detail.chinesemeaning" class="word-example-content">{{word_detail.chinesemeaning}}</view>


					<view class="word-example-title" @click='audioDefinition'>
						<text class="word-example-num">Definition</text>
						<view class="voice-imageback">
							<image v-if="!showDefinition" src='@/static/image/planbee/voice_bigger_off.png'
								class='word-iconimg'></image>
							<image v-else src='@/static/image/planbee/voice_bigger.png' class='word-iconimg'>
							</image>
						</view>
					</view>
					<view class="word-example-content">{{word_detail.def}}</view>
					<view class="word-example-title" @click='audioSentence'>
						<text class="word-example-num">Sentence</text>
						<view class="voice-imageback">
							<image v-if='!showSentence' src='@/static/image/planbee/voice_bigger_off.png'
								class='word-iconimg'></image>
							<image v-else src='@/static/image/planbee/voice_bigger.png' class='word-iconimg'>
							</image>
						</view>
					</view>
					<view class="word-example-content">{{word_detail.exp}}</view>
				</view>
				<view class='word-button-action'>
					<view @click="handleLast" :class="`${wordIndex === 0 ? 'hidden' : ''} word-button lastcolor`">LAST
					</view>
					<view @click="handleText" v-if="wordIndex === (wordLibrary.length-1) && title == '生词本'"
						class="word-button">TEXT</view>
					<view @click="handleNext"
						:class="`${wordIndex == (wordLibrary.length-1) ? 'hidden' : ''} word-button`">
						NEXT</view>
				</view>
			</view>
		</scroll-view>
	</scroll-view>
</template>

<script>
	export default {
		data() {
			return {
				scrollHeight: uni.getSystemInfoSync().windowHeight,
				showReportPromptbox: false,
				wordIndex: 0,
				word_detail: {}, //单词数据
				createInnerAudioContext: null, // 音频类
				canTapPronounciation: true, // 是否可以播放单词
				canTapSentence: true, // 是否可以播放例句
				canTapDefinition: true, // 是否可以播放释义
				showPronounciation: false, // 控制单词音频小喇叭显示状态
				showSentence: false, // 控制例句音频小喇叭显示状态
				showDefinition: false, // 控制释义音频小喇叭显示状态
				ReportPromptMsg: '您已复习完此阶段单词，是否立即进入测试？',
				transparency: 0,
				title: '',
			}
		},
		onLoad(options) {
			console.log('options', options)
			var wordDict = JSON.parse(options.wordDict);
			var index = -1;
			var wordLibrary = [];
			if (wordDict.type == 'normal') {
				wordLibrary = JSON.parse(options.wordLibrary);
				index = wordLibrary.indexOf(wordDict.wordId);
			}
			console.log('index', index);
			this.wordIndex = index;
			this.wordLibrary = wordLibrary;
			const formData = {};
			formData.id = wordDict.wordId;
			this.getWordDetail(formData);
		},
		onUnload: function() {
			if (this.createInnerAudioContext) {
				this.handlePlayRadioStop();
			}
		},
		onHidd: function() {
			if (this.createInnerAudioContext) {
				this.handlePlayRadioStop();
			}
		},
		onReady() {
			const that = this
			uni.createSelectorQuery().select('.word-topview').boundingClientRect(rect => {
				that.scrollHeight = uni.getSystemInfoSync().windowHeight - rect.bottom - 20;
			}).exec();
		},
		methods: {
			// 获取单词内容
			getWordDetail: function(formData) {
				this.$http.getWordInfo(formData).then(res => {
					console.log('getWordInfo', res)
					if (res.code === 200) {
						this.word_detail = res.data;
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000 //持续时间为 2秒
						})
					}
				})
			},
			// 单词问题反馈
			handleFeedback() {
				if (this.createInnerAudioContext) {
					this.handlePlayRadioStop();
				}
				uni.navigateTo({
					url: '/pages/lexicon/lexFeedback?wordId=' + this.word_detail.id,
				})
			},
			audioPronounciation() {
				if (this.word_detail.purl) {
					var that = this;
					if (!this.canTapPronounciation) {
						return;
					}
					if (this.createInnerAudioContext) {
						this.handlePlayRadioStop();
					}
					if (this.canTapPronounciation) {
						this.handlePlayRadioStart(this.word_detail.purl);
						this.canTapPronounciation = false;
						this.showPronounciation = true;
						this.showSentence = false;
						this.showDefinition = false;
						setTimeout(() => {
							this.canTapPronounciation = true;
						}, 2000);
					}
				} else {
					uni.showToast({
						title: '暂无音频信息',
						icon: 'none',
						duration: 2000 //持续时间为 2秒
					})
				}
			},
			audioDefinition() {
				if (this.word_detail.durl) {
					var that = this;
					if (!this.canTapDefinition) {
						return;
					}
					if (this.createInnerAudioContext) {
						this.handlePlayRadioStop();
					}
					if (this.canTapDefinition) {
						this.handlePlayRadioStart(this.word_detail.durl);
						this.canTapDefinition = false;
						this.showPronounciation = false;
						this.showSentence = false;
						this.showDefinition = true;
						setTimeout(() => {
							this.canTapDefinition = true;
						}, 1000);
					}
				} else {
					uni.showToast({
						title: '暂无音频信息',
						icon: 'none',
						duration: 2000 //持续时间为 2秒
					})
				}
			},
			audioSentence() {
				if (this.word_detail.eurl) {
					var that = this;
					if (!this.canTapSentence) {
						return;
					}
					if (this.createInnerAudioContext) {
						this.handlePlayRadioStop();
					}
					if (this.canTapSentence) {
						this.handlePlayRadioStart(this.word_detail.eurl);
						this.canTapSentence = false;
						this.showPronounciation = false;
						this.showSentence = true;
						this.showDefinition = false;
						this.canTapDefinition = true;
						setTimeout(() => {
							this.canTapSentence = true;
						}, 1000);
					}
				} else {
					uni.showToast({
						title: '暂无音频信息',
						icon: 'none',
						duration: 2000 //持续时间为 2秒
					})
				}
			},
			handleLast() {
				if (this.createInnerAudioContext) {
					this.handlePlayRadioStop();
				}
				var index = this.wordIndex;
				if (index > 0) {
					index--;
					var wordId = this.wordLibrary[index];
					let formData = {}
					formData.id = wordId;
					this.getWordDetail(formData);
					this.wordIndex = index;
				}
			},
			handleNext() {
				if (this.createInnerAudioContext) {
					this.handlePlayRadioStop();
				}
				var index = this.wordIndex;
				index++;
				if (index < this.wordLibrary.length) {
					var wordId = this.wordLibrary[index];
					let formData = {}
					formData.id = wordId;
					this.getWordDetail(formData);
					this.wordIndex = index
				}
			},
			handleText: function() {
				// if (this.title == '生词本') {
				// 	this.setData({
				// 		showReportPromptbox: true,
				// 	})
				// }
			},
			/**
			 * 开始播放（暂未用到）
			 * url 播放音频地址
			 */
			handlePlayRadioStart: function(url) {
				console.log('url____', url)
				// 播放音频
				const createInnerAudioContext = uni.createInnerAudioContext()
				this.createInnerAudioContext = createInnerAudioContext;
				this.createInnerAudioContext.autoplay = true;
				var encodeUrl = encodeURI(url);
				this.createInnerAudioContext.src = encodeUrl;
				this.createInnerAudioContext.onPlay(() => {})
				this.createInnerAudioContext.onError((res) => {
					console.log(res)
					if (res.errCode === -1 || res.errCode === 10001 || res.errCode === 10002 || res.errCode ===
						10003 || res.errCode === 10004) {
						const errorStr = ''
						switch (res.errCode) {
							case -1:
								errorStr = '未知错误';
								break;
							case 10001:
								errorStr = '系统错误';
								break;
							case 10002:
								errorStr = '网络错误';
								break;
							case 10003:
								errorStr = '文件错误';
								break;
							case 10004:
								errorStr = '格式错误';
								break;
							default:
								break;
						}
						this.showPronounciation = false;
						this.showSentence = false;
						this.showDefinition = false;
						uni.showToast({
							title: errorStr,
							icon: 'none',
							duration: 2000
						})
					}
				})
				this.createInnerAudioContext.onEnded((res) => {
					this.showPronounciation = false;
					this.showSentence = false;
					this.showDefinition = false;
				})
				this.createInnerAudioContext.onCanplay(() => {})
			},
			/**
			 * 暂停播放
			 */
			handlePlayRadioStop: function() {
				// this.createInnerAudioContext.stop();
				// this.createInnerAudioContext.pause(() => {
				// 	console.log('暂停音频');
				// });
				this.createInnerAudioContext.destroy(() => {
					console.log('销毁音频上下文对象');
				})
				this.showPronounciation = false;
				this.showSentence = false;
				this.showDefinition = false;
			},
		}
	}
</script>

<style lang="less">
	.backview {
		width: 100%;
		height: 100vh;
		display: flex;
		flex-direction: column;
		justify-content: center;
		background: #fff7dd;
	}

	.word-topview {
		width: 100%;
		padding: 20px 30px;
		background: -webkit-linear-gradient(top, #000, #2a2824);
		display: flex;
		flex-direction: row;
		align-items: flex-start;
		justify-content: space-between;
	}

	.core-img {
		width: 50px;
		height: 50px;
	}

	.content-back {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.word-detail-back {
		width: 240px;
		display: flex;
		flex-direction: column;
		align-items: flex-start;

		.word-detail {
			color: white;
			font-family: 'hzgb';
			font-size: 20px;
		}

		.word-detail-bottom {
			width: 100%;
			margin-top: 15px;
			display: flex;
			flex-direction: row;
			align-items: center;

			.voice-img {
				width: 20px;
				height: 20px;
			}

			.phonetic-mark {
				margin-left: 5px;
				font-size: 14px;
				color: white;
			}
		}
	}

	.word-example-content {
		font-size: 14px;
		width: 90%;
		text-overflow: ellipsis;
		overflow-wrap: break-word;
		text-align: center;
		color: #000;
	}

	.feedback {
		width: 30px;
		height: 30px;
		border-radius: 5px;
		background: -webkit-linear-gradient(top, #d1a34e, #fee96f);
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow: 0px 5px 0px 0px #e2b558;

		.feedback-img {
			width: 20px;
			height: 20px;
		}
	}

	.gameType-topTitle-view {
		width: 100%;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
	}

	.gameType-topTitle {
		font-family: 'hzgb';
		font-size: 14px;
		margin: 10px auto 5px 25px;
	}

	.gameType-line {
		width: 150px;
		height: 3px;
		background-color: #ffcf30;
		margin-left: 25px;
	}

	.word-detailback {
		width: 86%;
		position: relative;
		margin-top: 15px;
		border-radius: 10px;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 30px;
		box-sizing: border-box;
		justify-content: center;
		background-image: url(@/static/image/fjh/word_app_back.jpg);
		background-size: cover;
		background-repeat: no-repeat;
		background-position: center center;
		box-shadow: 0rpx 30rpx 0rpx 0rpx #dfb055;

		// .word-backimg {
		// 	width: 340px;
		// 	height: 100%;
		// 	position: absolute;
		// 	top: 0;
		// 	left: 0;

		// }

		.word-class {
			color: black;
			font-size: 22px;
			text-align: center;
			font-family: 'hzgb';
		}

		.word-bottom {
			display: flex;
			margin: 5px 20px;
			justify-content: center;
			flex-direction: row;
			word-wrap: break-word;
			align-items: center;
			margin-top: 5px;

			.phonetic-symbols {
				text-align: center;
				flex: 1;
				font-size: 16px;
				font-weight: 500;
				color: #000;
				word-wrap: break-word;
				margin: 0px 15px 0 40px;
				line-height: 20px;
			}

			.word-icon {
				display: flex;
				justify-content: center;
				align-items: center;

				.voice-imageback {
					display: flex;
					justify-content: center;
					align-items: center;
				}

				.word-iconimg-big {
					width: 25px;
					height: 25px;
				}
			}

		}

		.word-bottom-message {
			color: black;
			font-size: 10px;
			text-align: center;
			max-width: 325px;
			margin-top: 10px;
			line-height: 13px;
		}

		.word-bottom-message2 {
			color: black;
			font-size: 10px;
			text-align: center;
			max-width: 325px;
			line-height: 13px;
		}

		.word-example-title {
			height: 35px;
			padding: 0px 15px;
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;
			border-radius: 17px;
			background: black;
			margin-top: 15px;
			margin-bottom: 5px;

			.word-example-num {
				color: white;
				font-size: 20px;
				font-weight: 800;
				padding: 0 10px;
			}

			.voice-imageback {
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}

	}

	.word-iconimg {
		width: 22px;
		height: 22px;
	}

	.word-button-action {
		width: 320px;
		display: -webkit-flex;
		display: flex;
		flex-flow: row;
		justify-content: space-around;
		padding: 20px 0 10px 0;
		margin: 15px 40px;
	}

	.word-button {
		text-align: center;
		width: 140px;
		height: 40px;
		line-height: 40px;
		font-size: 15px;
		font-weight: bold;
		border-radius: 15px;
		background: -webkit-linear-gradient(top, #dba537, #fce871);
		box-shadow: 0px 5px 0px 0px #e1b156;
		font-family: 'hzgb';
		color: white;
	}

	.lastcolor {
		background: -webkit-linear-gradient(top, #000000, #302f2b) !important;
		box-shadow: 0px 5px 0px 0px #000000 !important;
	}

	.hidden {
		visibility: hidden;
	}
</style>